<template>
  <div class="group-detail-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="breadcrumb">
          <router-link to="/study-groups" class="breadcrumb-link">学习小组</router-link>
          <span class="breadcrumb-separator">/</span>
          <span class="breadcrumb-current">{{ group.name || '小组详情' }}</span>
        </div>
        <h1 class="page-title">{{ group.name || '小组详情' }}</h1>
        <p class="page-subtitle">{{ group.description || '暂无描述' }}</p>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 小组详情内容 -->
    <div v-else-if="group.id" class="group-content">
      <div class="content-layout">
        <!-- 左侧主要内容 -->
        <div class="main-content">
          <!-- 小组基本信息 -->
          <div class="group-info-card">
            <div class="group-cover" v-if="group.coverImage">
              <img :src="group.coverImage" :alt="group.name" />
            </div>
            
            <div class="group-basic-info">
              <div class="group-header">
                <h2 class="group-name">{{ group.name }}</h2>
                <el-tag :type="getGroupTypeTag()" size="large">{{ getGroupTypeText() }}</el-tag>
              </div>
              
              <p class="group-description">{{ group.description }}</p>
              
              <div class="group-stats">
                <div class="stat-item">
                  <el-icon><User /></el-icon>
                  <span>{{ group.memberCount || 0 }} 成员</span>
                </div>
                <div class="stat-item">
                  <el-icon><Document /></el-icon>
                  <span>{{ group.resourceCount || 0 }} 资源</span>
                </div>
                <div class="stat-item">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ group.activityCount || 0 }} 活动</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 小组动态 -->
          <div class="group-activity-card">
            <h3 class="card-title">最新动态</h3>
            <div class="activity-list">
              <div v-for="activity in activities" :key="activity.id" class="activity-item">
                <div class="activity-avatar">
                  <img :src="activity.user?.avatar || '/default-avatar.png'" :alt="activity.user?.username" />
                </div>
                <div class="activity-content">
                  <div class="activity-header">
                    <span class="activity-user">{{ activity.user?.username }}</span>
                    <span class="activity-time">{{ formatDate(activity.createdAt) }}</span>
                  </div>
                  <p class="activity-text">{{ activity.content }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar">
          <!-- 小组操作 -->
          <div class="group-actions-card">
            <h3 class="card-title">小组操作</h3>
            <div class="action-buttons">
              <el-button 
                v-if="!isJoined" 
                type="primary" 
                :loading="isJoining"
                @click="handleJoin"
                class="action-btn"
              >
                加入小组
              </el-button>
              <el-button 
                v-else 
                type="danger" 
                @click="handleLeave"
                class="action-btn"
              >
                退出小组
              </el-button>
              <el-button type="default" @click="handleShare" class="action-btn">
                分享小组
              </el-button>
            </div>
          </div>

          <!-- 小组成员 -->
          <div class="group-members-card">
            <h3 class="card-title">小组成员</h3>
            <div class="members-list">
              <div v-for="member in group.members" :key="member.id" class="member-item">
                <img :src="member.avatar || '/default-avatar.png'" :alt="member.username" class="member-avatar" />
                <div class="member-info">
                  <span class="member-name">{{ member.username }}</span>
                  <span class="member-role">{{ member.role }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 小组资源 -->
          <div class="group-resources-card">
            <h3 class="card-title">小组资源</h3>
            <div class="resources-list">
              <div v-for="resource in group.resources" :key="resource.id" class="resource-item">
                <div class="resource-icon">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="resource-info">
                  <span class="resource-name">{{ resource.name }}</span>
                  <span class="resource-size">{{ resource.size }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 404状态 -->
    <div v-else class="not-found">
      <el-empty description="小组不存在或已被删除">
        <el-button type="primary" @click="$router.push('/study-groups')">
          返回小组列表
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Document, Calendar } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/common'

// 路由
const route = useRoute()

// 数据状态
const loading = ref(false)
const group = ref<any>({})
const activities = ref<any[]>([])
const isJoined = ref(false)
const isJoining = ref(false)

// 计算属性
const groupId = computed(() => route.params.id as string)

// 获取小组类型标签
const getGroupTypeTag = () => {
  const typeMap: Record<string, string> = {
    'public': 'success',
    'private': 'warning',
    'closed': 'danger'
  }
  return typeMap[group.value.type] || 'info'
}

// 获取小组类型文本
const getGroupTypeText = () => {
  const typeMap: Record<string, string> = {
    'public': '公开小组',
    'private': '私有小组',
    'closed': '封闭小组'
  }
  return typeMap[group.value.type] || '未知类型'
}

// 加载小组详情
const loadGroupDetail = async () => {
  try {
    loading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟数据
    group.value = {
      id: groupId.value,
      name: '公务员考试备考小组',
      description: '专注于公务员考试备考的学习小组，分享学习经验、资料和心得。',
      type: 'public',
      coverImage: 'https://picsum.photos/id/24/800/400',
      memberCount: 156,
      resourceCount: 23,
      activityCount: 8,
      members: [
        { id: 1, username: '组长', avatar: 'https://picsum.photos/id/1011/200/200', role: '组长' },
        { id: 2, username: '副组长', avatar: 'https://picsum.photos/id/1012/200/200', role: '副组长' },
        { id: 3, username: '成员1', avatar: 'https://picsum.photos/id/1013/200/200', role: '成员' },
        { id: 4, username: '成员2', avatar: 'https://picsum.photos/id/1014/200/200', role: '成员' }
      ],
      resources: [
        { id: 1, name: '行测真题集.pdf', size: '2.3MB' },
        { id: 2, name: '申论范文.docx', size: '1.8MB' },
        { id: 3, name: '面试技巧.mp4', size: '15.2MB' }
      ]
    }
    
    activities.value = [
      {
        id: 1,
        content: '分享了最新的行测真题解析',
        user: { username: '组长', avatar: 'https://picsum.photos/id/1011/200/200' },
        createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString()
      },
      {
        id: 2,
        content: '发布了申论写作技巧分享',
        user: { username: '副组长', avatar: 'https://picsum.photos/id/1012/200/200' },
        createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
      }
    ]
    
  } catch (error) {
    console.error('加载小组详情失败:', error)
    ElMessage.error('加载小组详情失败')
  } finally {
    loading.value = false
  }
}

// 加入小组
const handleJoin = async () => {
  try {
    isJoining.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    isJoined.value = true
    group.value.memberCount = (group.value.memberCount || 0) + 1
    ElMessage.success('成功加入小组')
  } catch (error) {
    ElMessage.error('加入小组失败')
  } finally {
    isJoining.value = false
  }
}

// 退出小组
const handleLeave = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    isJoined.value = false
    group.value.memberCount = Math.max(0, (group.value.memberCount || 0) - 1)
    ElMessage.success('已退出小组')
  } catch (error) {
    ElMessage.error('退出小组失败')
  }
}

// 分享小组
const handleShare = () => {
  // 复制链接到剪贴板
  const url = window.location.href
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

// 组件挂载时加载数据
onMounted(() => {
  loadGroupDetail()
})
</script>

<style lang="scss" scoped>
.group-detail-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 30px;
  
  .header-content {
    .breadcrumb {
      margin-bottom: 10px;
      font-size: 14px;
      color: #666;
      
      .breadcrumb-link {
        color: #409eff;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
      
      .breadcrumb-separator {
        margin: 0 8px;
        color: #ccc;
      }
      
      .breadcrumb-current {
        color: #333;
      }
    }
    
    .page-title {
      font-size: 28px;
      font-weight: 600;
      color: #333;
      margin: 0 0 10px 0;
    }
    
    .page-subtitle {
      font-size: 16px;
      color: #666;
      margin: 0;
    }
  }
}

.loading-container {
  padding: 40px;
}

.group-content {
  .content-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  
  .main-content {
    .group-info-card {
      background: white;
      border-radius: 12px;
      padding: 30px;
      margin-bottom: 30px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      
      .group-cover {
        width: 100%;
        height: 200px;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .group-basic-info {
        .group-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 15px;
          
          .group-name {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 0;
          }
        }
        
        .group-description {
          font-size: 16px;
          color: #666;
          line-height: 1.6;
          margin: 0 0 20px 0;
        }
        
        .group-stats {
          display: flex;
          gap: 30px;
          
          .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
            font-size: 14px;
            
            .el-icon {
              font-size: 16px;
            }
          }
        }
      }
    }
    
    .group-activity-card {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      
      .card-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0 0 20px 0;
      }
      
      .activity-list {
        .activity-item {
          display: flex;
          gap: 15px;
          padding: 15px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .activity-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          
          .activity-content {
            flex: 1;
            
            .activity-header {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-bottom: 5px;
              
              .activity-user {
                font-weight: 500;
                color: #333;
              }
              
              .activity-time {
                font-size: 12px;
                color: #999;
              }
            }
            
            .activity-text {
              color: #666;
              line-height: 1.5;
              margin: 0;
            }
          }
        }
      }
    }
  }
  
  .sidebar {
    .group-actions-card,
    .group-members-card,
    .group-resources-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 0 0 15px 0;
      }
    }
    
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
      
      .action-btn {
        width: 100%;
      }
    }
    
    .members-list,
    .resources-list {
      .member-item,
      .resource-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
      }
    }
    
    .member-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .member-info {
      flex: 1;
      
      .member-name {
        display: block;
        font-weight: 500;
        color: #333;
        font-size: 14px;
      }
      
      .member-role {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
    
    .resource-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border-radius: 6px;
      color: #666;
    }
    
    .resource-info {
      flex: 1;
      
      .resource-name {
        display: block;
        font-weight: 500;
        color: #333;
        font-size: 14px;
      }
      
      .resource-size {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.not-found {
  padding: 60px 20px;
  text-align: center;
}
</style>
